<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link href="images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <title>注册</title>

        <!-- jQuery (required) & jQuery UI + theme (optional) -->
        <link href="${pageContext.request.contextPath}/css/jquery-ui.min.css" rel="stylesheet">
        <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery-migrate-1.2.1.min.js"></script>

        <!-- keyboard widget css & script (required) -->
        <link href="${pageContext.request.contextPath}/css/keyboard.css" rel="stylesheet">
        <script src="${pageContext.request.contextPath}/js/jquery.keyboard.js"></script>
        <script src="${pageContext.request.contextPath}/js/jquery.keyboard.extension-typing.js"></script>

        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/weui.css"/>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/wechat.css"/>
    </head>
    <body ontouchstart>
        <div class="container js_container">

        </div>
        <div class="page">
        	<form action="${pageContext.request.contextPath}/member/register" id="register_form" method="post">
	            <div class="bd">
	                <h3 class="text-center text-blue margin-t-20">注册会员</h3>
	                <div class="weui_cells weui_cells_form">
	                    <div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                        	<input type="hidden" id="stationId" name="stationId" value="${stationId}"/>
	                            <input class="weui_input" type="text" id="name" name="name" placeholder="请输入姓名"/>
	                        </div>
	                    </div>
	                    <div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="text" id="phoneNum" name="phoneNum" placeholder="请输入手机号"/>
	                        </div>
	                    </div>
	                    <div class="weui_cell weui_vcode">
	                        <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="number" id="authCode" name="authCode" placeholder="请输入验证码"/>
	                        </div>
	                        <div class="weui_cell_ft">
	                            <a class="weui_btn weui_btn_primary no-border-radius" onclick="register.send_code()" href="javascript:" id="showTooltips">验证码</a>
	                        </div>
	                    </div>
	                    <div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">身份证</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="text" id="idCard" name="idCard" placeholder="请输入身份证"/>
	                        </div>
	                    </div>
	                    <div class="weui_cell no-padding-t no-padding-b">
	                        <div class="weui_cell_hd"><label class="weui_label">车牌号</label></div>
	                        <div class="weui_cell weui_cell_select weui_select_before no-before">
	                            <!--<input id="meta" type="text">-->
	                            <div class="weui_cell_hd">
	                                <select class="weui_select no-padding-l" name="select2" id="keyboard">
	                                    <option value="1">京</option>
	                                    <option value="2">浙</option>
	                                    <option value="3">苏</option>
	                                    <option value="4">辽</option>
	                                </select>
	                            </div>
	                            <div class="weui_cell_bd weui_cell_primary">
	                                <input class="weui_input" type="tel" id="licensePlate" name="licensePlate" placeholder="请输入车牌号"/>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">加油密码</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="password" id="fuellingPassword" name="fuellingPassword" placeholder="6位数字，不输入则代表无密码"/>
	                        </div>
	                    </div>
	                </div>
	                <div class="weui_cells_tips">
	                    <input name="checkbox-0" type="checkbox" /> 我同意<a href="#">《用户服务协议》</a>
	                </div>
	                <div class="weui_btn_area">
	                    <a href="javascript:;" onclick="register.submit()" class="weui_btn weui_btn_primary" id="showDialog">确定</a>
	                </div>
	            </div>
			</from>
            <!--BEGIN dialog-->
            <div class="weui_dialog_alert" id="dialog" style="display: none;">
                <div class="weui_mask"></div>
                <div class="weui_dialog">
                    <div class="weui_dialog_bd margin-t-20">该手机号已注册，请更换手机号</div>
                    <div class="weui_dialog_ft">
                        <a href="javascript:;" class="weui_btn_dialog primary text-blue">确定</a>
                    </div>
                </div>
            </div>
            <!--END dialog-->
        </div>
        <div class="footer">
            <span>本服务由</span>
            <img src="${pageContext.request.contextPath}/images/logo.png" title="油掌柜" />
            <span>提供技术支持</span>
        </div>
        <script src="${pageContext.request.contextPath}/js/zepto.min.js"></script>
        <script src="${pageContext.request.contextPath}/js/wechat.js"></script>
        <script>
        $(function () {
            $('#meta').keyboard({
                resetDefault: false,
                layout: 'custom',
                customLayout: {
                    'default' : [
                        '京 沪 浙 苏 粤 鲁 晋 冀',
                        '豫 川 渝 辽 吉 黑 皖 鄂',
                        '湘 赣 闵 陕 甘 宁 蒙 津',
                        '贵 云 桂 琼 青 新 藏',
                        '{cancel}'
                    ]
                },
                display : {
                    'a'      : '\u2714:Accept (Shift+Enter)', // check mark - same action as accept
                    'accept' : 'Accept:Accept (Shift+Enter)',
                    'alt'    : 'AltGr:Alternate Graphemes',
                    'b'      : '\u2190:Backspace',    // Left arrow (same as &larr;)
                    'bksp'   : 'Bksp:Backspace',
                    'c'      : '\u2716:Cancel (Esc)', // big X, close - same action as cancel
                    'cancel' : '取消',
                    'clear'  : 'C:Clear',             // clear num pad
                    'combo'  : '\u00f6:Toggle Combo Keys',
                    'dec'    : '.:Decimal',           // decimal point for num pad (optional), change '.' to ',' for European format
                    'e'      : '\u21b5:Enter',        // down, then left arrow - enter symbol
                    'enter'  : 'Enter:Enter',
                    'lock'   : '\u21ea Lock:Caps Lock', // caps lock
                    's'      : '\u21e7:Shift',        // thick hollow up arrow
                    'shift'  : 'Shift:Shift',
                    'sign'   : '\u00b1:Change Sign',  // +/- sign for num pad
                    'space'  : '&nbsp;:Space',
                    't'      : '\u21e5:Tab',          // right arrow to bar (used since this virtual keyboard works with one directional tabs)
                    'tab'    : '\u21e5 Tab:Tab'       // \u21b9 is the true tab symbol (left & right arrows)
                },
                maxLength : 1
            }).addTyping();

            $('#showDialog').click(function() {
                var $dialog = $('#dialog');
                $dialog.show();
                $dialog.find('.weui_btn_dialog').on('click', function () {
                    $dialog.hide();
                });
            });
        });
        
        var register = {
        		submit : function(){
        			var stationId = $("#stationId").val();
        			var name = $("#name").val();
        			var phoneNum = $("#phoneNum").val();
        			var idCard = $("#idCard").val();
        			var licensePlate = $("#licensePlate").val();
        			var fuellingPassword = $("#fuellingPassword").val();
        			var authCode = $("#authCode").val();
        			var code = $("#code").val();
        			if(!/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/i.test(phoneNum)){
        				 alert("手机号码输入不合法");  
        			     return  false;  
        			}
        			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
        			   if(reg.test(idCard) === false)  
        			   {  
        			       alert("身份证输入不合法");  
        			       return  false;  
        			   }  
        			$("#register_form").submit();
        		},
        		send_code :function(){
        			var phoneNum = $("#phoneNum").val();
        			var stationId = $("#stationId").val();
        			$.ajax({
        			   type:"POST",
        			   url:"${pageContext.request.contextPath}/member/generateCode",
        			   data:{stationId:stationId,phoneNum:phoneNum},
        			   success: function(data){
        				   if(data.code == 200){
        					   alert("已发送");
        					   $("#code").val(data.msg);
        				   }else{
        				     alert("生成验证码异常");
        					   
        				   }
        			   }
        			});
        		}
        	};
        </script>
    </body>
</html>